<template>
  <div class="page-container">
    <div class="page-content">
      <div class="container" style="flex-grow: 1;">
        <basic-card :title='$t("tourist.strategy")' :icon-class="'el-icon-eleme'">
          <basic-table :pageMethod="$mainApi.strategyApi.getStrategyByPage" :tableForm="tableForm">
            <template #table-top="basicTable">
              <el-form ref="form" :inline="true" size="small" class="text-right">
                <el-form-item>
                  <el-input v-model="tableForm.search" @change="basicTable.table.refresh"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="basicTable.table.refresh">{{$t('botton.search')}}</el-button>
                  <el-button type="success" @click="showStrategyFormDialop(null, {})">{{$t('botton.create')}}</el-button>
                  <el-button
                    type="danger"
                    @click="showDeleteDialop(basicTable.table.selectRows)"
                    :disabled="basicTable.table.selectRows.length < 1"
                  >{{$t('botton.batch_delete')}}</el-button>
                </el-form-item>
              </el-form>
            </template>
            <template #table-column>
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="title" :label="$t('tourist.title')">
                <template slot-scope="scope">
                  <el-button type="text" @click="showStrategyFormDialop(scope.row.id, scope.row)">{{ scope.row.title }}</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="image_url" :label="$t('tourist.image_url')">
                <template slot-scope="scope">
                  <img :src="scope.row.image_url" style="width: 100%;" />
                </template>
              </el-table-column>
              <el-table-column prop="info" :label="$t('tourist.info')"></el-table-column>
              <el-table-column prop="details" :label="$t('tourist.details')"></el-table-column>
              <el-table-column prop="sort" :label="$t('tourist.sort')"></el-table-column>
              <el-table-column prop="created_at" :label="$t('tourist.created_at')"></el-table-column>
              <el-table-column prop="updated_at" :label="$t('tourist.updated_at')"></el-table-column>
            </template>
            <template #others-elements="basicTable">
              <strategy-form-dialop ref="StrategyFormDialop" @success="basicTable.table.refresh" />
              <basic-delete-dialop ref="DeleteDialop" @confirm="(list) => deleteData(list, basicTable.table.refresh)" />
            </template>
          </basic-table>
        </basic-card>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import StrategyFormDialop from "./components/strategyFormDialop.vue";
import BasicDeleteDialop from "@/components/Basic/Dialop/BasicDeleteDialop.vue";
import BasicTable from "@/components/Basic/Table/BasicTable.vue";
import BasicCard from "@/components/Basic/Card/BasicCard.vue";

export default Vue.extend({
  components: { StrategyFormDialop, BasicDeleteDialop, BasicTable, BasicCard },
  data() {
    return {
      tableForm: {
        search: ""
      }
    }
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    showStrategyFormDialop(id: number, formData: any) {
      (this.$refs.StrategyFormDialop as any).init(id, formData);
    },
    showDeleteDialop(selectRows: Array<any>) {
      if (selectRows.length < 1) {
        this.$message.warning("请至少选择一个攻略");
      }
      const deleteList: Array<any> = [];
      selectRows.forEach((selected: any) => {
        deleteList.push({
          id: selected.id,
          label: selected.title
        });
      });
      (this.$refs.DeleteDialop as any).init(deleteList);
    },
    deleteData(list: Array<any>, refresh: Function) {
      const allPromise: Array<any> = [];

      list.forEach((item) => {
        allPromise.push(this.$mainApi.strategyApi.deleteStrategyById(item.id));
      });

      Promise.all(allPromise).then(() => {
        refresh();
      });
    }
  }
})
</script>

<style>

</style>
